<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>Far发现你热爱的电影和演员</title>

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="/static/plugins/fontawesome-free/css/all.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href="/static/dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <!-- Select2 -->
    <link rel="stylesheet" href="/static/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="/static/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="index3.html" class="nav-link">首页</a>
            </li>
            <li class="nav-item d-none d-sm-inline-block">
                <a href="#" class="nav-link">联系人</a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
                <a class="nav-link" data-toggle="dropdown" href="">
                    <i class="far fa-user"></i>
                    <span class="badge badge-primary navbar-badge">2</span>
                </a>
                <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
                    <span class="dropdown-header">个人信息</span>
                    <div class="col-md-12">
                        <!-- Widget: user widget style 2 -->
                        <div class="card card-widget widget-user-2">
                            <!-- Add the bg color to the header using any of the bg-* classes -->
                            <div class="widget-user-header bg-warning">
                                <div class="widget-user-image">
                                    <img class="img-circle elevation-2" src="{{ Session.userimage }}" alt="User Avatar">
                                </div>
                                <!-- /.widget-user-image -->
                                <h3 class="widget-user-username">{{ session.username }}</h3>
                                <h5 class="widget-user-desc">{{ session.userdesc }}</h5>
                            </div>
                            <div class="card-footer p-0">
                                <ul class="nav flex-column">
                                    <li class="nav-item">
                                        <a class="nav-link">
                                            ID <span class="float-right badge bg-primary">{{ session.userid }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link">
                                            性别 <span class="float-right badge bg-danger">{{ session.usergender }}</span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link">
                                            邮箱 <span class="float-right badge bg-info">{{ session.useremail }}</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- /.widget-user -->
                    </div>
                    <div class="dropdown-divider"></div>
                    <a href="{{ url_for('account.logout') }}" class="dropdown-item dropdown-footer">退出登录</a>
                </div>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <a href="{{ url_for('actor.start') }}" class="brand-link">
            <img src="/static/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
                 style="opacity: .8">
            <span class="brand-text ">电影演员分析推荐</span>
        </a>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar user panel (optional) -->
            <div class="user-panel mt-3 pb-3 mb-3 d-flex">
                <div class="image">
                    <img src="{{ Session.userimage }}" class="img-circle elevation-2" alt="User Image">
                </div>
                <div class="info">
                    <a href="#" class="d-block">{{ Session.username }}</a>
                </div>
            </div>

            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-item has-treeview menu-open">
                        <a class="nav-link active">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>
                                功能菜单
                                <i class="right fas fa-angle-left"></i>
                            </p>
                        </a>
                        <ul class="nav nav-treeview">
                            <li class="nav-item">
                                <a href="{{ url_for('actor.start') }}" class="nav-link">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>演员列表</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="{{ url_for('film.start') }}" class="nav-link active">
                                    <i class="far fa-circle nav-icon"></i>
                                    <p>电影列表</p>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url_for('recommend.start') }}" class="nav-link">
                            <i class="nav-icon fas fa-th"></i>
                            <p>
                                演员推荐
                                <span class="right badge badge-danger">Hot</span>
                            </p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">电影详细信息</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ url_for('film.start') }}">电影列表</a></li>
                            <li class="breadcrumb-item active">电影详细信息</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <div class="content">
            <div class="container-fluid">
                <!-- Default box -->
                <div class="card card-solid">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-sm-4">
                                <div class="position-relative">
                                    <img src="/static/image/film/{{  Film.film_img }}"
                                         class="product-image img-rounded img-fluid" alt="Product Image">
                                    <div class="ribbon-wrapper ribbon-xl">
                                            <div class="ribbon bg-danger text-xl">
                                                {{  Film.film_score }}
                                            </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-8">
                                <h3 class="my-3">{{  Film.film_name }}</h3>
                                <p class="text-muted text-sm">
                                    <b>导演: </b> {{ Film.film_director }}
                                </p>
                                <p class="text-muted text-sm">
                                    <b>出品时间: </b> {{ Film.film_year }}
                                </p>
                                <p class="text-muted text-sm">
                                    <b>电影类型: </b> {{ Film.film_type }}
                                </p>
                                <p class="text-muted text-sm">
                                    <b>电影地区: </b> {{ Film.film_region }}
                                </p>
                                <p class="text-muted text-sm">
                                    <b>主演列表: </b>{{ Film.film_protagonist }}
                                </p>

                                <hr>
                                <h4>星率<small>(ﾟωﾟ)ﾉ☆ 1星等于2分</small></h4>
                                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                                    <label class="btn btn-default text-center active">
                                        5星
                                        <br>
                                        <input type="text" class="knob" value="{{  Film.film_star_ratio_five }}" data-skin="tron" data-thickness="0.2"
                                               data-width="90"
                                               data-height="90" data-fgColor="#39b54a" data-readonly="true">
                                    </label>
                                    <label class="btn btn-default text-center">
                                        4星
                                        <br>
                                        <input type="text" class="knob" value="{{  Film.film_star_ratio_four }}" data-skin="tron"
                                               data-thickness="0.2"
                                               data-width="90"
                                               data-height="90" data-fgColor="#9c26b0" data-readonly="true">
                                    </label>
                                    <label class="btn btn-default text-center">
                                        3星
                                        <br>
                                        <input type="text" class="knob" value="{{  Film.film_star_ratio_three }}" data-skin="tron" data-thickness="0.2"
                                               data-width="90"
                                               data-height="90" data-fgColor="#0081ff" data-readonly="true">
                                    </label>
                                    <label class="btn btn-default text-center">
                                        2星
                                        <br>
                                        <input type="text" class="knob" value="{{  Film.film_star_ratio_two }}" data-skin="tron" data-thickness="0.2"
                                               data-width="90"
                                               data-height="90" data-fgColor="#fbbd08" data-readonly="true">
                                    </label>
                                    <label class="btn btn-default text-center">
                                        1星
                                        <br>
                                        <input type="text" class="knob" value="{{  Film.film_star_ratio_one }}" data-skin="tron" data-thickness="0.2"
                                               data-width="90"
                                               data-height="90" data-fgColor="#e54d42" data-readonly="true">
                                    </label>
                                </div>

                                <h4 class="mt-3">评论数</h4>
                                <div class="info-box bg-danger">
                                    <span class="info-box-icon"><i class="fas fa-comments"></i></span>

                                    <div class="info-box-content">
                                        <span class="info-box-text">评论</span>
                                        <span class="info-box-number">{{  Film.film_comments_sum }}</span>
                                    </div>
                                    <!-- /.info-box-content -->
                                </div>

                                <div class="mt-4">
                                    <div class="btn btn-primary btn-lg btn-flat">
                                        <i class="fas fa-cart-plus fa-lg mr-2"></i>
                                        Add to Cart
                                    </div>

                                    <div class="btn btn-default btn-lg btn-flat">
                                        <i class="fas fa-heart fa-lg mr-2"></i>
                                        添加至收藏
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row mt-4">
                            <nav class="w-100">
                                <div class="nav nav-tabs" id="product-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="product-desc-tab" data-toggle="tab"
                                       href="#product-desc" role="tab" aria-controls="product-desc"
                                       aria-selected="true">Description</a>
                                    <a class="nav-item nav-link" id="product-comments-tab" data-toggle="tab"
                                       href="#product-comments" role="tab" aria-controls="product-comments"
                                       aria-selected="false">Comments</a>
                                    <a class="nav-item nav-link" id="product-rating-tab" data-toggle="tab"
                                       href="#product-rating" role="tab" aria-controls="product-rating"
                                       aria-selected="false">Rating</a>
                                </div>
                            </nav>
                            <div class="tab-content p-3" id="nav-tabContent">
                                <div class="tab-pane fade show active" id="product-desc" role="tabpanel"
                                     aria-labelledby="product-desc-tab"> Lorem ipsum dolor sit amet, consectetur
                                    adipiscing elit. Morbi vitae condimentum erat. Vestibulum ante ipsum primis in
                                    faucibus orci luctus et ultrices posuere cubilia Curae; Sed posuere, purus at
                                    efficitur hendrerit, augue elit lacinia arcu, a eleifend sem elit et nunc. Sed
                                    rutrum vestibulum est, sit amet cursus dolor fermentum vel. Suspendisse mi nibh,
                                    congue et ante et, commodo mattis lacus. Duis varius finibus purus sed venenatis.
                                    Vivamus varius metus quam, id dapibus velit mattis eu. Praesent et semper risus.
                                    Vestibulum erat erat, condimentum at elit at, bibendum placerat orci. Nullam gravida
                                    velit mauris, in pellentesque urna pellentesque viverra. Nullam non pellentesque
                                    justo, et ultricies neque. Praesent vel metus rutrum, tempus erat a, rutrum ante.
                                    Quisque interdum efficitur nunc vitae consectetur. Suspendisse venenatis, tortor non
                                    convallis interdum, urna mi molestie eros, vel tempor justo lacus ac justo. Fusce id
                                    enim a erat fringilla sollicitudin ultrices vel metus.
                                </div>
                                <div class="tab-pane fade" id="product-comments" role="tabpanel"
                                     aria-labelledby="product-comments-tab"> Vivamus rhoncus nisl sed venenatis luctus.
                                    Sed condimentum risus ut tortor feugiat laoreet. Suspendisse potenti. Donec et
                                    finibus sem, ut commodo lectus. Cras eget neque dignissim, placerat orci interdum,
                                    venenatis odio. Nulla turpis elit, consequat eu eros ac, consectetur fringilla urna.
                                    Duis gravida ex pulvinar mauris ornare, eget porttitor enim vulputate. Mauris
                                    hendrerit, massa nec aliquam cursus, ex elit euismod lorem, vehicula rhoncus nisl
                                    dui sit amet eros. Nulla turpis lorem, dignissim a sapien eget, ultrices venenatis
                                    dolor. Curabitur vel turpis at magna elementum hendrerit vel id dui. Curabitur a ex
                                    ullamcorper, ornare velit vel, tincidunt ipsum.
                                </div>
                                <div class="tab-pane fade" id="product-rating" role="tabpanel"
                                     aria-labelledby="product-rating-tab"> Cras ut ipsum ornare, aliquam ipsum non,
                                    posuere elit. In hac habitasse platea dictumst. Aenean elementum leo augue, id
                                    fermentum risus efficitur vel. Nulla iaculis malesuada scelerisque. Praesent vel
                                    ipsum felis. Ut molestie, purus aliquam placerat sollicitudin, mi ligula euismod
                                    neque, non bibendum nibh neque et erat. Etiam dignissim aliquam ligula, aliquet
                                    feugiat nibh rhoncus ut. Aliquam efficitur lacinia lacinia. Morbi ac molestie
                                    lectus, vitae hendrerit nisl. Nullam metus odio, malesuada in vehicula at,
                                    consectetur nec justo. Quisque suscipit odio velit, at accumsan urna vestibulum a.
                                    Proin dictum, urna ut varius consectetur, sapien justo porta lectus, at mollis nisi
                                    orci et nulla. Donec pellentesque tortor vel nisl commodo ullamcorper. Donec varius
                                    massa at semper posuere. Integer finibus orci vitae vehicula placerat.
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
        <div class="p-3">
            <h5>Title</h5>
            <p>Sidebar content</p>
        </div>
    </aside>
    <!-- /.control-sidebar -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="float-right d-none d-sm-inline">
            Far 电影演员分析推荐系统
        </div>
        <!-- Default to the left -->
        <strong>Copyright <a href="https://github.com/HunterLC">HunterLC</a>.</strong> All rights reserved.
    </footer>
</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="/static/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="/static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
<!-- Select2 -->
<script src="/static/plugins/select2/js/select2.full.min.js"></script>
<!-- jQuery Knob -->
<script src="/static/plugins/jquery-knob/jquery.knob.min.js"></script>
<script>
    $(function () {
        /* jQueryKnob */

        $('.knob').knob({
            /*change : function (value) {
             //console.log("change : " + value);
             },
             release : function (value) {
             console.log("release : " + value);
             },
             cancel : function () {
             console.log("cancel : " + this.value);
             },*/
            draw: function () {

                // "tron" case
                if (this.$.data('skin') == 'tron') {

                    var a = this.angle(this.cv)  // Angle
                        ,
                        sa = this.startAngle          // Previous start angle
                        ,
                        sat = this.startAngle         // Start angle
                        ,
                        ea                            // Previous end angle
                        ,
                        eat = sat + a                 // End angle
                        ,
                        r = true

                    this.g.lineWidth = this.lineWidth

                    this.o.cursor
                    && (sat = eat - 0.3)
                    && (eat = eat + 0.3)

                    if (this.o.displayPrevious) {
                        ea = this.startAngle + this.angle(this.value)
                        this.o.cursor
                        && (sa = ea - 0.3)
                        && (ea = ea + 0.3)
                        this.g.beginPath()
                        this.g.strokeStyle = this.previousColor
                        this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sa, ea, false)
                        this.g.stroke()
                    }

                    this.g.beginPath()
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, sat, eat, false)
                    this.g.stroke()

                    this.g.lineWidth = 2
                    this.g.beginPath()
                    this.g.strokeStyle = this.o.fgColor
                    this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false)
                    this.g.stroke()

                    return false
                }
            }
        })
        /* END JQUERY KNOB */

    })
</script>
</body>
</html>
